<template>
	<div class="abnormal">
		<div class="main">
			<div class="bg"></div>
			<div class="text">Request failed,Please try again</div>
			<div class="button" @click="retry">
				<div class="icon"></div>
				Retry
			</div>
		</div>
	</div>
</template>
<script>
import { onMounted } from "@vue/runtime-core";
export default {
	setup(props, ctx) {
		const retry = () => {
			window.trackEvent({
				pageTitle: "abnormalPage",
				ev: "clickRetryButton",
			});
			ctx.emit("retry");
		};
		onMounted(() => {
			window.trackEvent({
				pageTitle: "abnormalPage",
				ev: "showServerPage",
			});
		});
		return {
			retry,
		};
	},
};
</script>
<style lang="less" scoped>
.abnormal {
	height: 100%;
	width: 100%;
	.fc();
	.main {
		.bg {
			height: 2rem;
			width: 2rem;
			background: url(https://dl.b6ad8.xyz/yowin/imgs/me/abnormal_net.svg)
				no-repeat center;
			background-size: contain;
		}
		.text {
			font-size: 0.14rem;
			line-height: 0.24rem;
			color: #9c9da6;
			text-align: center;
		}
		.button {
			margin: 0.12rem auto 0;
			.unique-button();
			box-shadow: none;
			height: 0.4rem;
			width: 1.42rem;
			font-size: 0.16rem;
			font-weight: bold;
			.icon {
				margin-right: 0.04rem;
				height: 0.2rem;
				width: 0.2rem;
				background: url(../../assets/images/icon_refresh.svg) no-repeat
					center;
				background-size: contain;
			}
		}
	}
}
</style>